<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>06_浮动布局</title>
        <style>
            .fu {
                background-color: gray;
                /*BFC结界解决父元素失高问题：父元素会自动根据子元素浮动后的实际高度自动填充高度*/
                overflow:hidden;
            }
            .fu>div {
                width:100px;
                height:100px;
                border:3px solid #000;
            }
            .zi1 {
                background-color: #f00;
                float:left;
            }
            .zi2 {
                background-color: #0f0;
                float:left;
            }
            .zi3 {
                background-color: #00f;
                float:left;
            }


        </style>

    </head>
    <body>
    <div class="fu">
        <div class="zi1"></div>
        <div class="zi2"></div>
        <div class="zi3"></div>
    </div>


    </body>
</html>